import React from 'react';
import { connect } from 'dva';
import styles from './login.css';
import * as userService from '../../services/userService';
import { Layout, Form, Icon, Input, Button, Checkbox, notification, Spin } from 'antd';
import { hashHistory } from 'react-router'
const FormItem = Form.Item;
const { Header, Sider, Content, Footer } = Layout;
class UserLogin extends React.Component {
  state = { loading: false }
  handleSubmit = (e) => {
    this.setState({ loading: true });

    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // console.log('Received values of form: ', values);
      }
    });
    debugger;
    userService.login(userName.value, password.value).then((res) => {
      debugger;
      if (res.success) {
        hashHistory.push({ pathname: '/' });
        const token = res.result.accessToken;
        if (token) {
          sessionStorage.setItem('accessToken', token);
        }
      }

      // else {
      //   notification['error']({
      //     message:  res.error.message,
      //     description: res.error.detail
      //   });
      // }
      this.setState({ loading: false });
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Layout className={styles.layout}>
        {/* <Header>
         
        </Header> */}
        <Content className={styles.content}>
          <div>
            <p className={styles.companyName}>杭州舒泰/千芝雅</p>
            
            <p className={styles.sysName}>产业链溯源管理平台</p>
            <Spin spinning={this.state.loading} size='large'>

              <Form onSubmit={this.handleSubmit} className={styles.loginform}>
                <FormItem>
                  {getFieldDecorator('userName', {
                    rules: [{ required: true, message: '请输入用户名!' }],
                  })(
                    <Input size="large" prefix={<Icon type="user" style={{ fontSize: 16 }} />} placeholder="用户名" />
                    )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: '请输入密码!' }],
                  })(
                    <Input size="large" prefix={<Icon type="lock" style={{ fontSize: 16 }} />} type="password" placeholder="密码" />
                    )}
                </FormItem>
                <FormItem>
                  {/* {getFieldDecorator('remember', {
                  valuePropName: 'checked',
                  initialValue: true,
                })(
                  <Checkbox>记住我</Checkbox>
                  )}
                <a className={styles.loginformforgot} href="">忘记密码</a> */}
                  <Button type="primary" htmlType="submit" size='large' className={styles.loginformbutton}>登陆</Button>
                  {/*Or <a href="">注册!</a>*/}
                </FormItem>
              </Form>
            </Spin>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          <div>AIO ©2017 Created by 中鼎科技</div>
        </Footer>
      </Layout>
    );
  }
}

function mapStateToProps(state) {
  return {
    userName: state.LayoutModel.userName
  }
}
export default Form.create(mapStateToProps)(UserLogin);
